import { SvgComponent } from "@/components/base/Svg"
import { pagePathAtom } from "@/features/business/HomePage_deprecated/atom"
import { resolveAssetImage } from "@/utils/common"
import styled from "@emotion/styled"
import { useAtom } from "jotai"
import { useLocation, useNavigate } from "react-router-dom"
const Container = styled.div`
    background-color: #fff;
    height: 40rem;
    display: flex;
    align-items: center;
    padding: 0 12rem;
`
const BackIcon = styled.div`
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24rem;
    height: 24rem;
`
const Logo = styled.div`
    margin-left: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
`
const IconArrowLeftSvg = styled(SvgComponent("pages/BetRecordPage/icon_arrow_left.svg"))``

const IconLogo = styled.img`
    width: 136rem;
    height: 32rem;
    object-fit: cover;
`

export function Menu() {
    const navigate = useNavigate()
    const location = useLocation()
    const [cachePath] = useAtom(pagePathAtom)

    return (
        <Container>
            <BackIcon
                onClick={() => {
                    navigate(cachePath.homeCurrentPath || location.state.from || "/")
                }}
            >
                <IconArrowLeftSvg />
            </BackIcon>
            <Logo>
                <IconLogo
                    src={resolveAssetImage("pages/HomePage/icon_logo.webp")}
                    alt=""
                />
            </Logo>
        </Container>
    )
}
